<template>
  <el-card class="eventEditor">
    <el-collapse v-model="activeNames" @change="handleChange" v-if="isShow">
      <el-collapse-item :title="item.message" :name="index" v-for="(item,index) in rules" :key="index">
        <div slot="title">
          {{item.message}}
          <i @click="delectFunc(index)" class="header-icon el-icon-delete"></i>
        </div>
        <attr-function :editItem="editItem[index]" :index="index" :formFields.sync="formFields" :rules.sync="rules"></attr-function>
      </el-collapse-item>
    </el-collapse>

    <div class="addScriptWarp">
      <el-input v-model="messageKey" placeholder="请输入提示文本"></el-input>
      <el-button type="primary" size="mini" @click="addEvent" :disabled="canAdd">添加规则</el-button>
    </div>
  </el-card>
</template>
<style lang="stylus" rel="stylesheet/stylus" scoped type="text/stylus">
.eventEditor {
  .addScriptWarp {
    display: flex;
    margin-top: 10px;

    .scriptselect {
      margin-right: 10px;
    }
  }
}
</style>

<script type="text/ecmascript-6">
/**
 * 数据编辑器，
 * 后续扩展接口访问支持
 */
import BaseComponent from '@/widgets/extend/BaseComponent'
import attrFunction from './Function'
import rules from '@/widgets/helper/setting/rules'
export default {
  mixins: [BaseComponent],
  name: 'DataEditor',
  components: { attrFunction },
  props: {
    content: {
      type: Array
    },
    /**
     * 支持 空，array，object
     */
    type: {
      type: String
    }
  },
  watch: {
    content: {
      immediate: true,
      handler: function (params) {
         this.editItem = params;
        console.log(params,"321432143214321432143124123")
        // this.inContent = params
      }
    },
    rules: function (newVal) {
      console.log(newVal,123)
    }
  },
  data: function () {
    return {
      editItem: [],
      activeNames: [0],
      messageKey: '',
      formFields: rules.fields,
    }
  },
  computed: {
    selectEvent() {
      return (this.eventList || []).filter(s => {
        return this.messageKey == s.value
      })[0]
    },
    canAdd: function (params) {
      var has = this.rules.find(val => {
        if (val.event == this.messageKey) {
          return true
        }
      })
      if (has) {
        return true
      } else {
        return false
      }
    },
    isShow() {
      console.log(this.editItem);
      if (this.$store.state.editField) {
        return this.$store.state.editField.type !== 'divider'
      }
      return false;

    },
    rules: {
      get() {
        return this.$store.state.editField.rules || []
      },
      set(rules) {
        console.log(rules)
        const newField = JSON.parse(JSON.stringify({
          ...this.$store.state.editField,
          rules: rules
        }))
        this.$store.commit('updateField', newField)
      }
    }
  },
  mounted: function () {
    // const rules = [...this.rules];

    // rules.forEach((val, index) => {
    //     if (index == params) {
    //       id = index
    //     }
    //   })
    console.log(this.rules,567890);
    // this.messageKey = 'click'
  },
  methods: {
    handleChange(params) {
      console.log(params,999090)
    },
    delectFunc(params) {
      var id = -1
      const rules = [...this.rules]
      rules.forEach((val, index) => {
        if (index == params) {
          id = index
        }
      })
      rules.splice(id, 1);
      this.rules = rules;
    },
    addEvent(params) {
      const rules = [...this.rules]
      if (this.messageKey) {
        rules.push({
          message: this.messageKey,
        })
        this.rules = rules;
        const index = this.rules.findIndex(item => item.message === this.messageKey);
        this.editItem[index] = { message: this.messageKey }

        this.messageKey = '';
      } else {
        this.$message.warning('请输入提示文本')
        return false;
      }

    }
  }
}
</script>

